<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="./js/echarts/echarts.5.0.0.js"></script>
		<script src="./js/echarts/theme/shine.js"></script>
		<title>模拟3D地图</title>
	</head>
	<style>
		body {
			width: 100%;
			height: 100%;
			background: #000;
		}
		#chart {
			width: 1000px;
			height: 1000px;
			margin: 0 auto;
		}
	</style>
	<body>
		<div id="chart"></div>
	</body>
	<script>
		fetch('https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json')
			.then(response => response.json())
			.then(data => {
				// 绘制地图板块
				echarts.registerMap('china', data);
				// 散点
				var points = [];
				// 地图
				var chinaMap = {};
				// 飞线的轨迹
				var coords = [];
				function color16() {
					//十六进制颜色随机
					var r = Math.floor(Math.random() * 256);
					var g = Math.floor(Math.random() * 256);
					var b = Math.floor(Math.random() * 256);
					var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
					return color;
				}
				data.features.forEach(item => {
					if (item.properties.name) {
						chinaMap[item.properties.name] = item.properties.center;
						points.push({ value: item.properties.center, itemStyle: { color: color16() } });
					}
				});
				// 随机获取飞线终点
				var cityIndex = Math.floor(Math.random() * Object.keys(points).length - 1);
				var coordCity = points[cityIndex];
				// 飞线
				points.forEach(item => {
					coords.push({
						// 起点=>终点
						coords: [[...item.value], [...coordCity.value]],
						lineStyle: item.itemStyle,
					});
				});
				console.log('chinaMap', chinaMap);
				console.log('points', points);
				console.log('coords', coords);
				let options = {
					geo: {
						map: 'china',
						aspectScale: 0.75, //长宽比
						zoom: 1.1,
						roam: false,
						itemStyle: {
							normal: {
								areaColor: {
									type: 'radial',
									x: 0.5,
									y: 0.5,
									r: 0.8,
									colorStops: [
										{
											offset: 0,
											color: '#09132c', // 0% 处的颜色
										},
										{
											offset: 1,
											color: '#274d68', // 100% 处的颜色
										},
									],
									globalCoord: true, // 缺省为 false
								},
								shadowColor: 'rgb(58,115,192)',
								shadowOffsetX: 10,
								shadowOffsetY: 11,
							},
							emphasis: {
								areaColor: '#2AB8FF',
								borderWidth: 0,
								color: 'green',
								label: {
									show: false,
								},
							},
						},
						regions: [
							{
								name: '南海诸岛',
								itemStyle: {
									areaColor: 'rgba(0, 10, 52, 1)',

									borderColor: 'rgba(0, 10, 52, 1)',
									normal: {
										opacity: 0,
										label: {
											show: false,
											color: '#009cc9',
										},
									},
								},
							},
						],
					},
					series: [
						{
							type: 'map',
							zoom: 1.1,
							map: 'china',
							roam: false,
							label: {
								normal: {
									show: true,
									textStyle: {
										color: '#1DE9B6',
									},
								},
								emphasis: {
									textStyle: {
										color: 'rgb(183,185,14)',
									},
								},
							},
							itemStyle: {
								normal: {
									borderColor: 'rgb(147, 235, 248)',
									borderWidth: 1,
									areaColor: {
										type: 'radial',
										x: 0.5,
										y: 0.5,
										r: 0.8,
										colorStops: [
											{
												offset: 0,
												color: '#09132c', // 0% 处的颜色
											},
											{
												offset: 1,
												color: '#274d68', // 100% 处的颜色
											},
										],
										globalCoord: true, // 缺省为 false
									},
								},
								emphasis: {
									areaColor: 'rgb(46,229,206)',
									borderWidth: 0.1,
								},
							},
							data: Object.keys(chinaMap).map(name => {
								return {
									name: name,
									value: Math.random() * 100,
								};
							}),
						},
						// 散点
						{
							type: 'effectScatter',
							coordinateSystem: 'geo',
							showEffectOn: 'render',
							zlevel: 1,
							rippleEffect: {
								period: 15,
								scale: 4,
								brushType: 'stroke',
							},
							hoverAnimation: true,
							label: {
								normal: {
									formatter: '{b}',
									position: 'right',
									offset: [15, 0],
									color: '#1DE9B6',
									show: true,
								},
							},
							itemStyle: {
								normal: {
									color: '#1DE9B6',
									shadowBlur: 10,
									shadowColor: '#333',
								},
							},
							symbolSize: 12,
							data: points,
						},
						//地图线的动画效果
						{
							type: 'lines',
							zlevel: 2,
							effect: {
								show: true,
								period: 4, //箭头指向速度，值越小速度越快
								trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
								symbol: 'arrow', //箭头图标
								symbolSize: 7, //图标大小
							},
							lineStyle: {
								normal: {
									color: '#1DE9B6',
									width: 1, //线条宽度
									opacity: 0.1, //尾迹线条透明度
									curveness: 0.3, //尾迹线条曲直度
								},
							},
							data: coords,
						},
					],
				};
				echarts.init(document.getElementById('chart')).setOption(options);
				var timer = setInterval(() => {
					const _options = { ...options };
					// 随机获取飞线终点
					var cityIndex = Math.floor(Math.random() * Object.keys(points).length - 1);
					var coordCity = points[cityIndex];
					coords = [];
					// 飞线
					points.forEach(item => {
						coords.push({
							// 起点=>终点
							coords: [[...item.value], [...coordCity.value]],
							lineStyle: item.itemStyle,
						});
					});
					_options.series[2].data = coords;
					options = _options;
					echarts.init(document.getElementById('chart')).setOption(options);
				}, 5000);
			});
	</script>
</html>
